<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            text-align: center
        }
        #c1{

        }
    
    </style>
</head>
<body onload="bridAnimation.init()">
    <canvas width="400" height="600" id="c1"></canvas>    
</body>
<script>
    // 背景类
    class BackGround{
        constructor(x,y,width,height,img_src){
            this.x=x;
            this.y=y;
            this.width=width;
            this.height=height;
            let image=new Image();
            this.img_src=img_src
            image.src=img_src;
            this.image=image;
            this.ctx=document.getElementById('c1').getContext('2d');
        }
        draw(){
            this.ctx.drawImage(this.image,this.x,this.y,this.width,this.height)
        }
    }
    // 管道类
    class Pipe extends BackGround{
        constructor(cutX,cutY,cutWidth,cutHeight,...args){
            super(...args);
            this.cutX=cutX;
            this.cutY=cutY;
            this.cutWidth=cutWidth;
            this.cutHeight=cutHeight;
        }
        draw(){
            this.ctx.drawImage(this.image,this.cutX,this.cutY,this.cutWidth,this.cutHeight,this.x,this.y,this.width,this.height)
        }
    }
    //小鸟类
    class Bird extends BackGround{
        constructor(index,...arg){
            super(...arg); 
            this.index=index;
        }
        draw(){
            var oImage = new Image();
            oImage.src = this.img_src[this.index%3];
            this.index++;
            this.ctx.drawImage(oImage, this.x, this.y, this.width, this.height);
        }
    }

    let bridAnimation={
        ctx:document.getElementById('c1').getContext('2d'),
        time:null,//定时器
        dis:150,//空隙
        bird_index:0,
        score:0,//得分
        g:10,    //小鸟下落速度
        speed:40,  //管道速度
        flag:false,
        birds_src:['./images/0.gif','./images/1.gif','./images/2.gif'],
        bg:new BackGround(0,0,400,600,'./images/bg.png'),
        ground:new BackGround(0,550,400,200,'images/ground.png'),
        up:new Pipe(150,500,150,800,0,0,100,200,'./images/pipe.png'),
        down:new Pipe(0,450,150,800,0,350,100,200,'./images/pipe.png'),
        brid:new Bird(0,100,250,40,40,['./images/0.gif','./images/1.gif','./images/2.gif']),
        keyup(e){
            if(e.keyCode==32){
                console.log(e.keyCode)
                bridAnimation.brid.y-=50
            }
        },
        judge(){
            //碰撞判断
            if((this.brid.x+this.brid.width>this.up.x)&&(this.brid.x+this.brid.width<=this.up.x+this.up.width+this.brid.width)){
                if(this.brid.y<=this.up.height){
                    clearInterval(this.time)
                }
                if(this.brid.height+this.brid.y>this.down.y){
                    clearInterval(this.time)
                }
            }
            // 小鸟下落
            bridAnimation.brid.y+=this.g
            document.onkeyup=this.keyup
            //管道移动
            if(bridAnimation.up.x+bridAnimation.up.width>0){
                bridAnimation.up.x-=this.speed
                bridAnimation.down.x-=this.speed
            }else{
                this.flag=true
                bridAnimation.up.x=400
                bridAnimation.down.x=400
                //  管道随机出现
                bridAnimation.up.height=Math.random()*200+100;
                bridAnimation.down.y=bridAnimation.up.height+this.dis
                bridAnimation.down.height=550-this.dis-bridAnimation.up.height;
            }
            if((this.brid.x>=this.up.x+this.up.width)&&this.flag){
                this.score++;
                this.flag=false
            }
            this.ctx.fillStyle="rgb(255,255,255)";
            this.ctx.font='30px Accent';
            this.ctx.fillText(this.score,190,100)
        },
        drawAll(){
            bridAnimation.ctx.clearRect(0,0,400,600);
            //绘制背景
            bridAnimation.bg.draw();
            //绘制地面
            bridAnimation.ground.draw();
            //绘制上管道
            bridAnimation.up.draw();
            //绘制下管道
            bridAnimation.down.draw();
            //绘制小鸟
            bridAnimation.brid.draw();
            //碰撞判断
            bridAnimation.judge();
        },
        init(){
            this.drawAll();
            this.time=setInterval(this.drawAll,100)
        }
    }

    
</script>
</html>